<template>
  <div class="group-table-box">

    <Row class="group-top">
      <Col span="8" offset="16" class="group-right">
        <div class="input-item" style="margin: 0;">
          <Button type="info" @click="onClickAddAccount">添加账号信息</Button>
        </div>
      </Col>
    </Row>

    <div class="table-container">
      <Table
        border
        class="table-container-table"
        :columns="columns7"
        :data="tableData"
        :loading="isLoading"
      ></Table>
      <Page
        :total="totalPageCount"
        :page-size="10"
        :current="form.pageIndex"
        show-elevator
        class="table-container-page"
        @on-change="getTableData"
      />
    </div>

    <!-- 点击编辑 -->
    <Modal
      v-model="showEditModal"
      @on-ok="onClickEditConfirm"
    >
      <div class="modal-container">
        <Divider orientation="left" class="modal-label">账号信息</Divider>
        <Row class="modal-content" :gutter="16">
          <Col span="4">
            <p class="modal-label-detail">账号登录名</p>
          </Col>
          <Col span="20">
            <Input v-model="form.remark" placeholder="请输入..." />
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="4">
            <p class="modal-label-detail">账号名称</p>
          </Col>
          <Col span="20">
            <Input v-model="form.remark" placeholder="请输入..." />
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="4">
            <p class="modal-label-detail">初始密码</p>
          </Col>
          <Col span="20">
            <Input v-model="form.remark" placeholder="请输入..." />
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="4">
            <p class="modal-label-detail">账号权限</p>
          </Col>
          <Col span="20">
            <Select v-model="form.class">
              <Option value="撒钱活动">撒钱活动</Option>
              <Option value="VIP活动">VIP活动</Option>
            </Select>
          </Col>
        </Row>
        <div slot="footer" class="modal-footer">
          <Button type="primary" @click="onClickAddConfirm">完成</Button>
        </div>
      </div>
    </Modal>

    <!-- 点击添加 -->
    <Modal
      v-model="showAddModal"
      width="50"
      footer-hide
    >
      <div class="modal-container">
        <Divider orientation="left" class="modal-label">账号信息</Divider>
        <Row class="modal-content" :gutter="16">
          <Col span="4">
            <p class="modal-label-detail">账号登录名</p>
          </Col>
          <Col span="20">
            <Input v-model="form.remark" placeholder="请输入..." />
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="4">
            <p class="modal-label-detail">账号名称</p>
          </Col>
          <Col span="20">
            <Input v-model="form.remark" placeholder="请输入..." />
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="4">
            <p class="modal-label-detail">初始密码</p>
          </Col>
          <Col span="20">
            <Input v-model="form.remark" placeholder="请输入..." />
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="4">
            <p class="modal-label-detail">账号权限</p>
          </Col>
          <Col span="20">
            <Select v-model="form.class">
              <Option value="撒钱活动">撒钱活动</Option>
              <Option value="VIP活动">VIP活动</Option>
            </Select>
          </Col>
        </Row>
        <div slot="footer" class="modal-footer">
          <Button type="primary" @click="onClickAddConfirm">完成</Button>
        </div>
      </div>
    </Modal>

    <!-- 点击添加 -->
    <Modal
      v-model="showUpdatePassword"
      footer-hide
    >
      <div class="modal-container">
        <Divider orientation="left" class="modal-label">重置密码</Divider>
        <Row class="modal-content" :gutter="16">
          <Col span="6">
            <p class="modal-label-detail">新密码</p>
          </Col>
          <Col span="18">
            <Input v-model="form.remark" placeholder="请输入..." />
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="6">
            <p class="modal-label-detail">确认新密码</p>
          </Col>
          <Col span="18">
            <Input v-model="form.remark" placeholder="请输入..." />
          </Col>
        </Row>
        <div slot="footer" class="modal-footer">
          <Button type="primary" @click="onClickAddConfirm">完成</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isLoading: false,
      showEditModal: false,
      showAddModal: false,
      showUpdatePassword: false,
      authSelect: ['群管理', '订单管理', '标签中心', '广告位管理', '用户管理', '报表管理', '账号管理'],
      totalPageCount: 10,
      form: {
        id: '',
        remark: '',
        roleName: '',
        gmtCreate: '',
        menuIds: [],
        pageIndex: 1,
        pageSize: 10,
      },
      add: {
        roleName: '',
        remark: '',
        menuIds: '',
        menuIds: []
      },
      columns7: [
        {
          title: '序号',
          type: 'index',
          align: 'center'
        },
        {
          title: '登录名',
          key: 'roleName',
          align: 'center'
        },
        {
          title: '权限',
          key: 'gmtCreate',
          align: 'center'
        },
        {
          title: '账号名称',
          key: 'remark',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'remark',
          align: 'center'
        },
        {
          title: '最后登录时间',
          key: 'remark',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 300,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.check(params.index)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '删除'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.updatePassword(params.index)
                  }
                }
              }, '重置密码')
            ]);
          }
        }
      ],
      tableData: [{
        roleName: '管理员'
      }]
    }
  },
  mounted() {
    // 获取所有菜单及id
    this.getAllMenusData()
    // 获取表格数据
    this.getTableData()
  },
  methods: {
    onClickAddAccount() {
      this.showAddModal = true
    },
    onClickEditConfirm() {
      //  点击修改
    },
    onClickAddConfirm() {
      //  点击添加确认按钮

    },
    check(index) {

    },
    remove(index) {
      this.$Modal.confirm({
        title: '确定删除？',
        content: '<p>确定删除？</p>',
        onOk: () => {

        },
        onCancel: () => {
          // this.$Message.info('取消');
        }
      })
    },
    updatePassword() {
      // 点击修改密码
      this.showUpdatePassword = true
    },
    getTableData(index) {

    },
    getAllMenusData() {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  color: #000;
}
.pull-right {
  float: right;
}
.group-table-box {
  padding: 20px;
}
.group-top {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
}
.group-right {
  display: flex;
  justify-content: flex-end;
}
.input-item button {
  color: #fff;
}
.table-container-page {
  text-align: center;
  margin-top: 20px;
}
.modal-container {
  padding: 30px 30px 20px 30px;
}
.modal-content {
  margin-top: 15px;
}
.modal-label {
  font-size: 16px;
  text-align: center;
}
.modal-label-detail {
  line-height: 32px;
  text-align: center;
}
.modal-input {
  width: 100%;
}
.modal-footer {
  text-align: center;
  margin-top: 15px;
}
.modal-footer button {
  color: #fff;
  width: 100px;
}
.madal-radio-group {

}
.madal-radio {
  margin: 10px;
}
</style>
